<template>
  <div
    id="EditProfileOverlay"
    class="fixed flex justify-center pt-14 md:pt-[105px] z-50 top-0 left-0 w-full h-full bg-black bg-opacity-50 overflow-auto"
  >
    <div
      class="relative bg-white w-full max-w-[700px] sm:h-[580px] h-[655px] mx-3 p-4 rounded-lg mb-10"
      :class="!uploadedImage ? 'h-[655px]' : 'h-[580px]'"
    >
      <div
        class="absolute flex items-center justify-between w-full p-5 left-0 top-0 border-b border-b-gray-300"
      >
        <div class="text-[22px] font-medium">Edit profile</div>
        <button @click="$generalStore.isEditProfileOpen = false">
          <Icon name="mdi:close" size="25" />
        </button>
      </div>

      <div
        class="h-[calc(500px-200px)]"
        :class="!uploadedImage ? 'mt-16' : 'mt-[58px]'"
      >
        <div v-if="!uploadedImage">
          <div
            id="ProfilePhotoSection"
            class="flex flex-col border-b sm:h-[118px] h-[145px] px-1.5 py-2 w-full"
          >
            <div
              class="font-semibold text-[15px] sm:mb-0 mb-1 text-gray-700 sm:w-[160px] sm:text-left text-center"
            >
              Profile photo
            </div>

            <div class="flex items-center justify-center sm:-mt-6">
              <label for="image" class="relative cursor-pointer">
                <img class="rounded-full" width="95" :src="userImage" />
                <div
                  class="absolute bottom-0 right-0 rounded-full bg-white shadow-xl border p-1 border-gray-300 inline-block w-[32px]"
                >
                  <Icon
                    name="ph:pencil-simple-line-bold"
                    size="17"
                    class="-mt-1 ml-0.5"
                  />
                </div>
              </label>
              <input
                class="hidden"
                type="file"
                id="image"
                @input="getUploadedImage"
                accept="image/png, image/jpeg, image/jpg"
              />
            </div>
          </div>

          <div
            id="UsernameSectionSection"
            class="flex flex-col border-b sm:h-[118px] px-1.5 py-2 mt-1.5 w-full"
          >
            <div
              class="font-semibold text-[15px] sm:mb-0 mb-1 text-gray-700 sm:w-[160px] sm:text-left text-center"
            >
              Username
            </div>

            <div class="flex items-center justify-center sm:-mt-6">
              <div class="sm:w-[60%] w-full max-w-md">
                <TextInput
                  placeholder="Username"
                  v-model:input="userName"
                  inputType="text"
                  max="30"
                />
                <div class="text-[11px] text-gray-500 mt-4">
                  Usernames can only contain letters, numbers, underscores, and
                  periods. Changing your username will also change your profile
                  link.
                </div>
              </div>
            </div>
          </div>

          <div
            id="BioSection"
            class="flex flex-col sm:h-[120px] px-1.5 py-2 mt-2 w-full"
          >
            <div
              class="font-semibold text-[15px] sm:mb-0 mb-1 text-gray-700 sm:w-[160px] sm:text-left text-center"
            >
              Bio
            </div>

            <div class="flex items-center justify-center sm:-mt-6">
              <div class="sm:w-[60%] w-full max-w-md">
                <textarea
                  cols="30"
                  rows="4"
                  v-model="userBio"
                  maxlength="80"
                  class="resize-none w-full bg-[#F1F1F2] text-gray-800 border border-gray-300 rounded-md py-2.5 px-3 focus:outline-none"
                ></textarea>
                <div v-if="userBio" class="text-[11px] text-gray-500">
                  {{ userBio.length }}/80
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-else class="w-full h-[430px]">
          <Cropper
            class="h-[430px]"
            ref="cropper"
            :stencil-component="CircleStencil"
            :src="uploadedImage"
          />
        </div>
      </div>

      <div
        id="ButtonSection"
        class="absolute p-5 left-0 bottom-0 border-t border-t-gray-300 w-full"
      >
        <div
          id="UpdateInfoButtons"
          v-if="!uploadedImage"
          class="flex items-center justify-end"
        >
          <button
            @click="$generalStore.isEditProfileOpen = false"
            class="flex items-center border rounded-sm px-3 py-[6px] hover:bg-gray-100"
          >
            <span class="px-2 font-medium text-[15px]">Cancel</span>
          </button>

          <button
            :disabled="!isUpdated"
            @click="updateUserInfo()"
            :class="!isUpdated ? 'bg-gray-200' : 'bg-[#F02C56]'"
            class="flex items-center bg-[#F02C56] text-white border rounded-md ml-3 px-3 py-[6px]"
          >
            <span class="mx-4 font-medium text-[15px]">Save</span>
          </button>
        </div>

        <div id="CropperButtons" v-else class="flex items-center justify-end">
          <button
            @click="uploadedImage = null"
            class="flex items-center border rounded-sm px-3 py-[6px] hover:bg-gray-100"
          >
            <span class="px-2 font-medium text-[15px]">Cancel</span>
          </button>

          <button
            @click="cropAndUpdateImage()"
            class="flex items-center bg-[#F02C56] text-white border rounded-md ml-3 px-3 py-[6px]"
          >
            <span class="mx-4 font-medium text-[15px]">Apply</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Cropper, CircleStencil } from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css'

import { storeToRefs } from 'pinia'
const { $userStore, $generalStore, $profileStore } = useNuxtApp()
const { name, bio, image } = storeToRefs($profileStore)

let file = ref(null)
let cropper = ref(null)
let uploadedImage = ref(null)
let userImage = ref(null)
let userName = ref(null)
let userBio = ref(null)
let isUpdated = ref(false)

onMounted(() => {
  userName.value = name.value
  userBio.value = bio.value
  userImage.value = image.value
})

const getUploadedImage = (e) => {
  file.value = e.target.files[0]
  uploadedImage.value = URL.createObjectURL(file.value)
}
const cropAndUpdateImage = async () => {
  // const { coordinates } = cropper.value.getResult()
  // let data = new FormData();

  // data.append('image', file.value || '')
  // data.append('height', coordinates.height || '')
  // data.append('width', coordinates.width || '')
  // data.append('left', coordinates.left || '')
  // data.append('top', coordinates.top || '')   

  // try {
  //     await $userStore.updateUserImage(data)
  //     await $userStore.getUser()
  //     await $profileStore.getProfile(route.params.id)

  //     $generalStore.updateSideMenuImage($generalStore.suggested, $userStore)
  //     $generalStore.updateSideMenuImage($generalStore.following, $userStore)

  //     userImage.value = image.value
  //     uploadedImage.value = null
  // } catch (error) {
  //     console.log(error)
  // }
}

const updateUserInfo = async () => {
  // try {
  //     await $userStore.updateUser(userName.value, userBio.value)
  //     await $userStore.getUser()
  //     await $profileStore.getProfile(route.params.id)

  //     userName.value = name.value
  //     userBio.value = bio.value

  //     setTimeout(() => {
  //         $generalStore.isEditProfileOpen = false
  //     }, 100)
  // } catch (error) {
  //     console.log(error)
  // }
}
watch(() => userName.value, () => {
  if (!userName.value || userName.value === name.value) {
    isUpdated.value = false
  } else {
    isUpdated.value = true
  }
})

watch(() => userBio.value, () => {
  if (!userName.value || userBio.value.length < 1) {
    isUpdated.value = false
  } else {
    isUpdated.value = true
  }
})
</script>